<template>
    <div 
      class="container"
      :style="{ top: positionY + 'px', left: positionX + 'px', width: containerWidth + 'px', height: containerHeight + 'px' }"
      v-if="isVisible"
    >
      <img 
        src="../assets/images/dialog/c-bl.png" 
        alt="" 
        class="handle a" 
        @mousedown.stop="startResize('bl', $event)"
      />
      <img 
        src="../assets/images/dialog/c-br.png" 
        alt="" 
        class="handle b" 
        @mousedown.stop="startResize('br', $event)"
      />
      <img 
        src="../assets/images/dialog/c-tl.png" 
        alt="" 
        class="handle c" 
        @mousedown.stop="startResize('tl', $event)"
      />
      <img 
        src="../assets/images/dialog/c-tr.png" 
        alt="" 
        class="handle d" 
        @mousedown.stop="startResize('tr', $event)"
      />
  
      <div 
        class="header" 
        @mousedown="startMove"
        @mousemove="onMove"
        @mouseup="endMove"
        @mouseleave="endMove"
      >
        <div class="one">
          <img src="../assets/images/dialog/icon.png" alt="" />
          <slot name="header">当日实时目标列表</slot>
        </div>
        <div class="content">
          <i class="el-icon-minus" @click="restoreOriginal"></i>
          <i class="el-icon-full-screen" @click="toggleFullScreen"></i>
          <i class="el-icon-close" @click="close"></i>
        </div>
      </div>
      <div class="last">
        <slot>内容区域</slot>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "MakeView",
    data() {
      return {
        isResizing: false,
        isMoving: false,
        isVisible: true, 
        originalWidth: 300, // 记录原始宽度
        originalHeight: 300, // 记录原始高度
        originalPositionX: 200, // 记录原始位置X
        originalPositionY: 200, // 记录原始位置Y
        positionX: 200, // 初始位置X
        positionY: 200, // 初始位置Y
        containerWidth: 300, // 初始宽度
        containerHeight: 300, // 初始高度
        resizeStartX: 0,
        resizeStartY: 0,
        startWidth: 0,
        startHeight: 0,
        moveStartX: 0,
        moveStartY: 0,
        resizeDirection: ''
      };
    },
    methods: {
      startMove(e) {
        this.isMoving = true;
        this.moveStartX = e.clientX - this.positionX;
        this.moveStartY = e.clientY - this.positionY;
      },
      onMove(e) {
        if (this.isMoving) {
          this.positionX = e.clientX - this.moveStartX;
          this.positionY = e.clientY - this.moveStartY;
        }
      },
      endMove() {
        this.isMoving = false;
      },

      startResize(direction, e) {
        this.resizeDirection = direction;
        this.isResizing = true;
        this.resizeStartX = e.clientX;
        this.resizeStartY = e.clientY;
        this.startWidth = this.containerWidth;
        this.startHeight = this.containerHeight;
        window.addEventListener('mousemove', this.onResize);
        window.addEventListener('mouseup', this.endResize);
      },
      onResize(e) {
        if (this.isResizing) {
          const dx = e.clientX - this.resizeStartX;
          const dy = e.clientY - this.resizeStartY;
  
          switch(this.resizeDirection) {
            case 'bl':
              this.containerWidth = Math.max(150, this.startWidth - dx);
              this.containerHeight = Math.max(150, this.startHeight + dy);
              break;
            case 'br':
              this.containerWidth = Math.max(150, this.startWidth + dx);
              this.containerHeight = Math.max(150, this.startHeight + dy);
              break;
            case 'tl':
              this.containerWidth = Math.max(150, this.startWidth - dx);
              this.containerHeight = Math.max(150, this.startHeight - dy);
              break;
            case 'tr':
              this.containerWidth = Math.max(150, this.startWidth + dx);
              this.containerHeight = Math.max(150, this.startHeight - dy);
              break;
          }
               
        if (this.containerWidth >= window.innerWidth * 0.7) {
          this.toggleFullScreen();
        }
        }
      },
      endResize() {
        this.isResizing = false;
        this.resizeDirection = '';
        window.removeEventListener('mousemove', this.onResize);
        window.removeEventListener('mouseup', this.endResize);
      },
      restoreOriginal() {
        this.containerWidth = this.originalWidth;
        this.containerHeight = this.originalHeight;
        this.positionX = this.originalPositionX;
        this.positionY = this.originalPositionY;
      },
      toggleFullScreen() {
        if (this.containerWidth === window.innerWidth && this.containerHeight === window.innerHeight) {
          this.restoreOriginal();
        } else {
          this.containerWidth = window.innerWidth;
          this.containerHeight = window.innerHeight;
          this.positionX = 0;
          this.positionY = 0;
        }
      },
      close() {
        this.isVisible = false;
        this.$emit('closed');
      }
    }
  };
  </script>
  
  <style scoped>
 .container {
    background-color: rgb(197, 177, 177);
    position: absolute; 
    display: flex;
    flex-direction: column; 
    align-items: center;
    overflow: visible;
    border: 2px solid #469; 
    box-sizing: border-box;
  }
  

  .handle {
    cursor: se-resize; 
  }
  
  .a {
    position: absolute;
    bottom: -2px; 
    left: -2px; 
    cursor: nw-resize; 
  }
  .b {
    position: absolute;
    bottom: -2px; 
    right: -2px; 
    cursor: ne-resize; 
  }
  .c {
    position: absolute;
    top: -2px; 
    left: -2px; 
    cursor: sw-resize; 
  }
  .d {
    position: absolute;
    top: -2px; 
    right: -2px; 
    cursor: se-resize; 
  }
  
  .header {
    width: 100%;
    height: 25px;
    border: 1px solid #000;
    background-color: rgb(128, 197, 197);
    cursor: move;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  
  .one img {
    width: 20px;
    height: 20px;
    object-fit: cover;
    margin-right: 5px; 
  }
  .content i{
    margin: 5px;
  }
  
  .last {
    width: 100%;
    height: calc(100% - 25px); 
    text-align: left;
    padding: 10px;
    box-sizing: border-box; 
  }
  </style>